<template>
  <div>
    <div class="max-title-view" :style="{width:getWidth(titleType)}">
      <div class="name">{{ objData.name }}</div>
      <div class="data-time">
        <img src="@/assets/dataStation/s-data.png">
        数据统计截至日期{{ formatDate(objData.closingDate) }}</div>
    </div>
    <div
      class="min-title-view"
      :class="{
        'min-title-view1':titleType==1,
        'min-title-view2':titleType==2,
        'min-title-view3':titleType==3}"
    >{{ objData.cropName }}</div>
    <div class="pinzhong-view">
      <div
        class="pview-left"
        :class="{
          'pview-left1':titleType==1,
          'pview-left2':titleType==2,
          'pview-left3':titleType==3}"
      >
        <div
          class="border-view"
          :class="{
            'border-view1':titleType==1,
            'border-view2':titleType==2,
            'border-view3':titleType==3}"
        >

          <span
            v-for="item in 10"
            :key="item"
            :class="{
              'spanview1':titleType==1,
              'spanview2':titleType==2,
              'spanview3':titleType==3}"
          />
          <div class="bgfgview" :style="{width:100-(objData.addYield)+'%'}">
            {{ objData.addYield }}%</div>
        </div>
        <div class="bottom-text">平均每亩产收增加约</div>
      </div>
      <div
        class="pview-right"
        :class="{
          'pview-right1':titleType==1,
          'pview-right2':titleType==2,
          'pview-right3':titleType==3}"
      >
        <div class="image">
          <img v-if="titleType==1" src="@/assets/dataStation/p2.png">
          <img v-else-if="titleType==2" src="@/assets/dataStation/p3.png">
          <img v-else-if="titleType==3" src="@/assets/dataStation/p4.png">
          <img v-else src="@/assets/dataStation/p1.png">
        </div>
        <div>
          <div class="bottom-text" style="padding-top: 0;">亩均节约人工成本</div>
          <div class="bottom-text"><span>{{ objData?.saveCose?.amount||'--' }}元</span>左右</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { formatDate } from '@/utils/format'

const props = defineProps({
  title: '',
  maxTitle: '',
  maxWidth: '',
  titleType: '',
  objData: {
    type: Object,
    default: () => ({})
  }
})
const getWidth = (index) => {
  if (index === 1) {
    return '70%'
  }
  if (index === 2) {
    return '64%'
  }
  if (index === 3) {
    return '64%'
  }
  if (index === 4) {
    return '70%'
  }
  return '70%'
}
onMounted(async() => {

})
</script>
  <style lang="scss">
  .el-progress-bar__inner,
  .el-progress-bar__outer{
    border-radius: 2px;
    background-color: transparent;
  }
.max-title-view{
background-image: url('@/assets/dataStation/max-title-bg.png');
background-size:100% 100%;
background-repeat: no-repeat;
background-position: left;
height:40px;
line-height:40px;
color:#BBECE5;
font-size:14px;
font-weight:bold;
text-indent:10px;
display:flex;
justify-content:space-between;
margin-top:26px;
width:70%;
.data-time{
    font-size:12px;
    font-weight:400;
    display: flex;
    align-items: center;
    justify-content: start;
    img{
      height: 12px;
      vertical-align: middle;
    }
}
}
.min-title-view1,
.min-title-view2,
.min-title-view3,
.min-title-view{
    background-size:100% 100%;
    background-repeat: no-repeat;
    background-position: left;
    height:30px;
    width:100px;
    background-image: url('@/assets/dataStation/min-title-bg.png');
    color:#69BDAA;
    line-height:30px;
    text-align:center;
    font-size:12px;
    margin-top:20px;
    margin-bottom:15px;
    position:relative;
}
.min-title-view1{
    background-image: url('@/assets/dataStation/min-title-bg3.png');
    color:#FB9E32;
}
.min-title-view2{
    background-image: url('@/assets/dataStation/min-title-bg2.png');
    color:#04CAFF;
}.min-title-view3{
    background-image: url('@/assets/dataStation/min-title-bg1.png');
    color:#D6D547;
}
.min-title-view1::before,
.min-title-view1::after,
.min-title-view2::before,
.min-title-view2::after,
.min-title-view3::before,
.min-title-view3::after,
.min-title-view::before,
.min-title-view::after{
    content: "";
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #00EBB4;
    border-radius: 100%;
    left: 20px;
    top: 50%;
    margin-top: -2.5px;
    box-shadow: 1px 0px 10px #00ebb4;
}
.min-title-view1::before,
.min-title-view1::after{
    background-color: #FB9E32;
    box-shadow: 1px 0px 10px #FB9E32;
}
.min-title-view2::before,
.min-title-view2::after{
    background-color: #04CAFF;
    box-shadow: 1px 0px 10px #04CAFF;
}
.min-title-view3::before,
.min-title-view3::after{
    background-color: #D6D547;
    box-shadow: 1px 0px 10px #D6D547;
}
.min-title-view1::after,
.min-title-view2::after,
.min-title-view3::after,
.min-title-view::after{
    right: 20px;
    left:auto;
}
.pinzhong-view{
          display:flex;
          justify-content:space-between;
          width:70%;
          margin-top: 15px;
          align-items: flex-start;
          .pview-left{
            width:40%;
            .border-view1,
            .border-view2,
            .border-view3,
            .border-view{
              height:20px;
              border-radius:2px;
              box-shadow: 0px 0px 9px 0px #00C188;
              border: 2px solid #01B390;
              padding:1px 2px;
              display:flex;
              align-items:center;
              justify-content: space-between;
              position:relative;
              .bgfgview{
                position:absolute;
                right:0;
                width:100%;
                height:20px;
                background-image: url('@/assets/dataStation/left-bg.png');
                background-position:-200px -100px;
                background-repeat:no-repeat;
                color:#B7FFEE;
                font-size:12px;
                text-indent:6px;
                line-height:20px;
              }
              span{
                width: 10%;
                height: 14px;
                background: linear-gradient(137deg, #9EFFE7 0%, #00C699 100%);
                border-radius: 2px;
                margin-right: 2px;
              }
              .spanview1{
                background: linear-gradient(137deg, #FEB969 0%, #EF7F36 100%);
              }
              .spanview2{
                background: linear-gradient(137deg, #46A1FE 0%, #007EFF 100%);
              }
              .spanview3{
                background: linear-gradient(137deg, #F5F47F 0%, #B3B203 100%);
              }
              span:last-child{
                margin-right: 2;
              }
            }
            .border-view1{
                box-shadow: 0px 0px 9px 0px #EF7F36;
                border: 2px solid #EF7F36;
                .bgfgview{
                  color:#DFA458;
                }
            }
            .border-view2{
              box-shadow: 0px 0px 9px 0px #007EFF;
              border: 2px solid #007EFF;
              .bgfgview{
                  color:#04CAFF;
                }
            }
            .border-view3{
               box-shadow: 0px 0px 10px 0px #C7C638;
               border: 2px solid #BBBA2E;
               .bgfgview{
                  color:#ECEC9E;
                }
            }
            .bottom-text{
              font-size:14px;
              color:#69BDAA;
              padding-top:10px;
            }
          }
          .pview-right{
            display:flex;
            width:60%;
            justify-content:left;
            align-items:flex-start;
            padding-left:10%;
            position:relative;
            .image{
              width: 30%;
              text-align:center;
              img{
                width: 90%;
              }
            }
            .bottom-text{
              font-size:14px;
              color:#69BDAA;
              padding-top:10px;
              span{
                font-size:16px;
                font-weight:bold;
                padding-right:6px;
                color:#B7FFEE;
              }
            }
          }
          .pview-left1,
          .pview-right1{
            .pview-left .bottom-text,
            .bottom-text{
             color: #DFA458;
             span{
                color:#FFD8AC;
             }
            }
          }
          .pview-left2,
          .pview-right2{
            .pview-left .bottom-text,
            .bottom-text{
             color: #04CAFF;
             span{
                color:#BDDEFF;
             }
            }
          }
          .pview-left3,
          .pview-right3{
            .pview-left .bottom-text,
            .bottom-text{
             color: #D6D547;
             span{
                color:#ECEC9E;
             }
            }
          }

          .pview-right1::after,
          .pview-right2::after,
          .pview-right3::after,
          .pview-right::after{
            background-image: url('@/assets/dataStation/p1-line.png');
            content:'';
            position: absolute;
            width: 3px;
            height: 110%;
            left: 10%;
            top: -10px;
            background-size: 100% 100%;
        }
        .pview-right1::after{
            background-image: url('@/assets/dataStation/p2-line.png');
        }
          .pview-right2::after{
            background-image: url('@/assets/dataStation/p4-line.png');
        }
          .pview-right3::after{
            background-image: url('@/assets/dataStation/p3-line.png');
        }
      }
  </style>

